<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Amaze UI Admin table Examples</title>
  <meta name="description" content="这是一个 table 页面">
  <meta name="keywords" content="table">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="icon" type="image/png" href="/Public/assets/i/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="/Public/assets/i/app-icon72x72@2x.png">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="/Public/assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="/Public/assets/css/admin.css">
  <link rel="stylesheet" href="/Public/assets/css/demo.css">
  <!-- 引用控制层插件样式 -->
  <link rel="stylesheet" href="/Public/tools/php_img_upload/control/css/zyUpload.css" type="text/css">
		
		
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

<include file="./Application/Admin/View/Share/header.html"/>

<div class="am-cf admin-main">
  <!-- sidebar start -->
    <include file="./Application/Admin/View/Share/left.html"/>

  <!-- sidebar end -->

  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">图片上传</strong> / <small>Photo List</small></div>
      </div>

      <hr>

      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
          <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
              <button onclick=window.location.href="/admin/photo/ptable.html" type="button" class="am-btn am-btn-default"><span class="am-icon-plus"></span> 相册列表</button>
              <button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 返回</button>
            </div>
          </div>
        </div>
        
        
      </div>

      <div class="am-g">
        <div class="am-u-sm-12">
          <h1 style="text-align:center;">图片上传</h1>
	    <div id="demo" class="demo"></div>   
	    <div id="successinfo"
        </div>
      </div>
    </div>

    <footer class="admin-content-footer">
      <hr>
      <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </footer>

  </div>
  <!-- content end -->
</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<footer>
  <hr>
  <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
</footer>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/Public/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/Public/assets/js/amazeui.min.js"></script>
<script src="/Public/assets/js/app.js"></script>
<!-- 引用核心层插件 -->
<script type="text/javascript" src="/Public/tools/php_img_upload/core/zyFile.js"></script>
<!-- 引用控制层插件 -->
<script type="text/javascript" src="/Public/tools/php_img_upload/control/js/zyUpload.js"></script>
<!-- 引用初始化JS -->
	<script>
		var photo_id ='<{$id}>';
		$(function(){
		// 初始化插件
		var width = $(window).width();
		if ( width >= 650 )	 width = '750px';
		else 	width = "100%";

		$("#demo").zyUpload({
			width            :   width,                 // 宽度
			height           :   "auto",                 // 宽度
			itemWidth        :   "140px",                 // 文件项的宽度
			itemHeight       :   "100px",                 // 文件项的高度
			//url              :   "/upload/UploadAction",  // 上传文件的路径
			url              :   "/Admin/Photo/imgUpload?id="+photo_id,
			inputName		 : 	'_img',
			id 				 :	 1,
			multiple         :   true,                    // 是否可以多个文件上传
			dragDrop         :   false,                    // 是否可以拖动上传文件
			del              :   true,                    // 是否可以删除文件
			finishDel        :   false,  				  // 是否在上传文件完成后删除预览
			/* 外部获得的回调接口 */
			onSelect: function(selectFiles, allFiles){    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
				console.info("当前选择了以下文件：");
				console.info(selectFiles);
			},
			onProgress: function(file, loaded, total){    // 正在上传的进度的回调方法
				var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
				eleProgress.html(percent);
				console.info(file.index);
				console.info("当前正在上传此文件：");
				console.info(file.name);
				console.info("进度等信息如下：");
				console.info(loaded);
				console.info(total);
			},   
			onDelete: function(file, files){              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
				console.info("当前删除了此文件：");
				console.info(file.name);
			},
			onSuccess: function(file, response){          // 文件上传成功的回调方法
				console.info("此文件上传成功：");
				$('#successinfo').append("<p>"+response+"</p>");
				console.info(response);
			},
			onFailure: function(file, response){          // 文件上传失败的回调方法
				$("#uploadImage_" + file.index).css("opacity", 0.2);
				console.info("此文件上传失败：");
				console.info(file.name);
			},
			onComplete: function(response){           	  // 上传完成的回调方法
				console.info("文件上传完成");
				console.info(response);
			}
		});
		
	});


			
	    </script>
</body>
</html>
